<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度谷歌一样的搜索提示</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
	$(function () {
		$("#txtKeyWord").keyup(function () {
			//取到输入框的值放进变量txt里面
			var txt=$(this).val();
			if ($.trim(txt)=="") {
				return;//不用往后执行了
			}
			$.post("GetFullTextSearchByKeys",{"keys":txt},function (res) {
				if(res.length>0){
					$("#word").empty().show();
					$(res).each(function () {
						$("#word").append("<div class='click_work'>"+this+"</div>");
					});
				}
			},"JSON");
			//选择某一个搜索建议项
			$(document).on("click",".click_work",function () {
				//获取选择的div里面的文本值
				var item=$(this).text();
				$("#txtKeyWord").val(item);
				$("#word").hide();
			})
		});
	})
</script>
</head>
<style type="text/css">
#word {
	position: absolute;
	z-index: 99;
	width: 445px;
	height: auto;
	background-color: white;
	border: black solid 1px;
	display: none;
}

.click_work {
	font-weight: lighter;
	font-size: 13px;
	cursor: pointer; /*鼠标放上变成小手*/
}

.click_work:hover {
	line-height: 25px;
	height:25px;
	font-weight: bold;
	color: black;
	vertical-align:middle;
	background-color:yellow;
}

.error {
	color: gray;
	cursor: pointer; /*鼠标放上变成小手*/
}
</style>

<body>

	<center>
		<h1>公司内部关键词引擎</h1>
	</center>
	<table align="center" cellspacing="0" cellpadding="10" border="0">
		<tr>
			<td style="position: relative;">
			<input type="text" id="txtKeyWord" placeholder="搜索" size="59"> 
				<div id="word"></div>
			</td>
		</tr>
	</table>

	<div
		style="text-align: center; margin: 50px 0; font: normal 14px/24px 'MicroSoft YaHei';">
		<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
	</div>
</body>
</html>